<template>
    <div>
      <van-sticky :offset-top="stickyHeight">
        <van-tabs title-active-color="red" title-inactive-color="#AAB3C8" background="##f9f9f9" color="red" swipe-threshold="6" v-model="active">
          <van-tab title="步行街" >
            <van-cell-group title="#步行街主干道" >
              <van-cell center title="是我平头哥了吗？" label="hi辉 刚刚" >
                <template #right-icon class="fds">
                  <van-icon name="chat-o" class="icon_class" size="10" >502</van-icon>
                  <van-icon name="good-job-o" class="icon_class" size="10">130</van-icon>
                  <van-icon name="fire-o" class="icon_class" size="10">12</van-icon>
                </template>
              </van-cell>
              <van-cell center title="这高铁也太晃了吧？" label="蝴蝶酥 刚刚" >
                <template #right-icon >
                  <van-icon name="chat-o" class="icon_class" size="10" >5124</van-icon>
                  <van-icon name="good-job-o" class="icon_class" size="10">950</van-icon>
                  <van-icon name="fire-o" class="icon_class" size="10">150</van-icon>
                </template>
              </van-cell>
              <van-cell center title="带上大瓶可乐+雪碧去见岳父岳母" label="懂球帝 刚刚" >
                <template #right-icon class="fds">
                  <van-icon name="chat-o" class="icon_class" size="10" >3145</van-icon>
                  <van-icon name="good-job-o" class="icon_class" size="10">450</van-icon>
                  <van-icon name="fire-o" class="icon_class" size="10">158</van-icon>
                </template>
              </van-cell>

            </van-cell-group>
          </van-tab>
          <van-tab title="早餐" >
            <van-cell-group title="#早餐" >
              <van-cell center title="感冒药里有安眠药眼睛睁不开，睡了" label="达克宁治脚气呀 刚刚" >
                <template #right-icon class="fds">
                  <van-icon name="chat-o" class="icon_class" size="10" >9045</van-icon>
                  <van-icon name="good-job-o" class="icon_class" size="10">550</van-icon>
                  <van-icon name="fire-o" class="icon_class" size="10">304</van-icon>
                </template>
              </van-cell>
            </van-cell-group>
          </van-tab>
          <van-tab title="休闲" ></van-tab>
          <van-tab title="人气" >

          </van-tab>
          <van-tab title="电竞" ></van-tab>
          <van-tab title="社区" ></van-tab>
        </van-tabs>
      </van-sticky>
    </div>
</template>
<van-icon name="chat-o" />
<script>
    export default {
      name: "MyLiving",
      data() {
        return {
          stickyHeight: '54',
          active: 0,
          items: [{ text: '分组 1' }, { text: '分组 2' }, { text: '分组 2' }, { text: '分组 2' }, { text: '分组 2' }, { text: '分组 2' }, { text: '分组 2' }],
        };
      },
      mounted() {
        let w = document.querySelector(".search-top").clientHeight;
        this.stickyHeight=`${w}`;
      }
    }
</script>
<van-icon name="good-job-o" />
<style scoped>

  .icon_class{
    margin-top: 30px;
    margin-left: 8px;
  }
</style>
